<template>
   <div class="editTableCellDemoWrap">
      <a-button class="editable-add-btn" @click="handleAdd">Add</a-button>
      <a-table bordered :dataSource="dataSource" :columns="columns">
         <template slot="name" slot-scope="text, record">
            <editable-cell
               :text="text"
               @change="onCellChange(record.key, 'name', $event)"
            />
         </template>
         <template slot="operation" slot-scope="text, record">
            <a-popconfirm
               v-if="dataSource.length"
               title="确认删除?"
               @confirm="() => onDelete(record.key)"
            >
               <a href="javascript:;">删除</a>
            </a-popconfirm>
         </template>
      </a-table>
   </div>
</template>

<script lang="js">
import EditableCell from 'components/EditableCell'

const dataSource = [
   {
      key: '0',
      name: 'Edward King 0',
      age: '0',
      address: 'London, Park Lane no. 0'
   },
   {
      key: '1',
      name: 'Edward King 1',
      age: '1',
      address: 'London, Park Lane no. 1'
   }
]
const columns = [
   {
      title: 'name',
      dataIndex: 'name',
      width: '30%',
      scopedSlots: { customRender: 'name' }
   },
   {
      title: 'age',
      dataIndex: 'age'
   },
   {
      title: 'address',
      dataIndex: 'address'
   },
   {
      title: 'operation',
      dataIndex: 'operation',
      scopedSlots: { customRender: 'operation' }
   }
]

export default {
   name: 'tableDemo',
   data() {
      return {
         dataSource,
         columns,
         count: 2
      }
   },
   components: {
      EditableCell
   },
   methods: {
      handleAdd() {
         let { count, dataSource } = this
         let newData = {
            key: count++,
            name: `Edward King ${count}`,
            age: 32,
            address: `London, Park Lane no. ${count}`
         }
         this.count = count
         this.dataSource = [...dataSource, newData]
      },
      onDelete(key) {
         const dataSource = [...this.dataSource]
         this.dataSource = dataSource.filter(item => item.key!==key)
      }
   }
}
</script>

<style lang="less" scoped>
   .editTableCellDemoWrap {
      margin-bottom: 30px;
   }

   /deep/ .editable-cell {
      position: relative;
   }

   /deep/ .editable-cell-input-wrapper,
   /deep/ .editable-cell-text-wrapper {
      padding-right: 24px;
   }

   /deep/ .editable-cell-text-wrapper {
      padding: 5px 24px 5px 5px;
   }

   /deep/ .editable-cell-icon,
   /deep/ .editable-cell-icon-check {
      position: absolute;
      right: 0;
      width: 20px;
      cursor: pointer;
   }

   /deep/ .editable-cell-icon {
      line-height: 18px;
      display: none;
   }

   /deep/ .editable-cell-icon-check {
      line-height: 28px;
   }

   /deep/ .editable-cell:hover .editable-cell-icon {
      display: inline-block;
   }

   /deep/ .editable-cell-icon:hover,
   /deep/ .editable-cell-icon-check:hover {
      color: #108ee9;
   }

   .editable-add-btn {
      margin-bottom: 8px;
   }
</style>
